{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <style>
        .battle-group {
            background: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .battle-header {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 15px 20px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .battle-info {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-top: 10px;
        }
        
        .info-item {
            text-align: center;
        }
        
        .info-value {
            font-size: 18px;
            font-weight: bold;
            display: block;
        }
        
        .info-label {
            font-size: 12px;
            opacity: 0.9;
        }
        
        .rounds-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .rounds-table th {
            background: #f8f9fa;
            padding: 12px;
            text-align: center;
            border-bottom: 2px solid #dee2e6;
            font-weight: bold;
        }
        
        .rounds-table td {
            padding: 10px 12px;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
        }
        
        .rounds-table tr:hover {
            background: #f8f9fa;
        }
        
        .player-actions {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 12px;
        }
        
        .player1-actions {
            background: #d4edda;
            color: #155724;
        }
        
        .player2-actions {
            background: #f8d7da;
            color: #721c24;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-finished {
            background: #d4edda;
            color: #155724;
        }
        
        .status-running {
            background: #cce7ff;
            color: #004085;
        }
        
        .status-pending {
            background: #e2e3e5;
            color: #383d41;
        }
        
        .status-error {
            background: #f8d7da;
            color: #721c24;
        }
        
        .no-rounds {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .pagination a, .pagination span {
            padding: 8px 12px;
            margin: 0 4px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            text-decoration: none;
            color: #007bff;
        }
        
        .pagination .current {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        
        .pagination a:hover {
            background: #e9ecef;
        }
        
        .summary-stats {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 10px;
            background: white;
            border-radius: 4px;
            border: 1px solid #dee2e6;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
        }
        
        .stat-label {
            font-size: 14px;
            color: #6c757d;
            margin-top: 5px;
        }
    </style>
{% endblock %}

{% block content %}
<div id="content-main">
    <div class="module filtered" id="changelist">
        <div class="results">
            <div class="actions">
                <h1>🎮 对战回合数据分组视图</h1>
                <p class="help">按对战记录分组显示所有回合数据，便于分析和管理。</p>
            </div>
            
            {% if battles_data %}
                <!-- 统计摘要 -->
                <div class="summary-stats">
                    <div class="stat-item">
                        <div class="stat-value">{{ page_obj.paginator.count }}</div>
                        <div class="stat-label">总对战数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">
                            {% for battle_data in battles_data %}
                                {% if forloop.first %}{{ battle_data.total_rounds }}{% endif %}
                            {% endfor %}
                        </div>
                        <div class="stat-label">当前页回合数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">
                            {% for battle_data in battles_data %}
                                {% if forloop.first %}{{ battle_data.total_actions_p1|add:battle_data.total_actions_p2 }}{% endif %}
                            {% endfor %}
                        </div>
                        <div class="stat-label">当前页总行动数</div>
                    </div>
                </div>
                
                <!-- 对战列表 -->
                {% for battle_data in battles_data %}
                <div class="battle-group">
                    <div class="battle-header">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <h3 style="margin: 0; font-size: 18px;">🎮 {{ battle_data.battle }}</h3>
                                <div style="margin-top: 5px; font-size: 14px; opacity: 0.9;">
                                    👤 {{ battle_data.battle.player1.username }} vs {{ battle_data.battle.player2.username }}
                                </div>
                            </div>
                            <div>
                                <span class="status-badge status-{{ battle_data.battle.status }}">
                                    {% if battle_data.battle.status == 'finished' %}✅ 已完成
                                    {% elif battle_data.battle.status == 'running' %}🔄 进行中
                                    {% elif battle_data.battle.status == 'pending' %}⏳ 等待中
                                    {% elif battle_data.battle.status == 'error' %}❌ 错误
                                    {% else %}{{ battle_data.battle.get_status_display }}
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        
                        <div class="battle-info">
                            <div class="info-item">
                                <span class="info-value">{{ battle_data.total_rounds }}</span>
                                <span class="info-label">总回合数</span>
                            </div>
                            <div class="info-item">
                                <span class="info-value">{{ battle_data.total_actions_p1 }}</span>
                                <span class="info-label">{{ battle_data.battle.player1.username }} 总行动</span>
                            </div>
                            <div class="info-item">
                                <span class="info-value">{{ battle_data.total_actions_p2 }}</span>
                                <span class="info-label">{{ battle_data.battle.player2.username }} 总行动</span>
                            </div>
                        </div>
                    </div>
                    
                    {% if battle_data.rounds %}
                    <div style="max-height: 400px; overflow-y: auto;">
                        <table class="rounds-table">
                            <thead>
                                <tr>
                                    <th style="width: 10%;">回合</th>
                                    <th style="width: 25%;">{{ battle_data.battle.player1.username }} 行动</th>
                                    <th style="width: 25%;">{{ battle_data.battle.player2.username }} 行动</th>
                                    <th style="width: 20%;">时间</th>
                                    <th style="width: 20%;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for round in battle_data.rounds %}
                                <tr>
                                    <td>
                                        <strong>第 {{ round.round_number }} 回合</strong>
                                    </td>
                                    <td>
                                        <span class="player-actions player1-actions">
                                            {{ round.player1_actions|length|default:0 }} 个行动
                                        </span>
                                    </td>
                                    <td>
                                        <span class="player-actions player2-actions">
                                            {{ round.player2_actions|length|default:0 }} 个行动
                                        </span>
                                    </td>
                                    <td>
                                        {% if round.timestamp %}
                                            {{ round.timestamp|date:"H:i:s" }}
                                        {% else %}
                                            <span style="color: #6c757d;">未知</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="{% url 'admin:battles_battleround_change' round.id %}" 
                                           style="color: #007bff; text-decoration: none; font-size: 12px;">
                                            📝 查看详情
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="no-rounds">
                        <p>该对战暂无回合数据</p>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <!-- 分页 -->
                {% if page_obj.has_other_pages %}
                <div class="pagination">
                    {% if page_obj.has_previous %}
                        <a href="?page=1">« 首页</a>
                        <a href="?page={{ page_obj.previous_page_number }}">‹ 上一页</a>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <span class="current">{{ num }}</span>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <a href="?page={{ num }}">{{ num }}</a>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}">下一页 ›</a>
                        <a href="?page={{ page_obj.paginator.num_pages }}">末页 »</a>
                    {% endif %}
                </div>
                {% endif %}
                
            {% else %}
                <div class="no-rounds">
                    <h3>📭 暂无对战回合数据</h3>
                    <p>当前系统中没有包含回合数据的对战记录。</p>
                    <a href="{% url 'admin:battles_battle_changelist' %}" style="color: #007bff;">返回对战列表</a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}